<template>
  <div id="centerLeft1">
    <div class="bg-color-black">

      <div class="d-flex pt-2 pl-2">
        <div class="d-flex">
<!--          <span class="fs-xl text mx-2">百章金额百分比(万元)</span>-->
          <dv-decoration-3 class="dv-dec-3" />
        </div>
      </div>

      <div id="center">
        <div class="up">
          <div
            class="bg-color-black item"
          >
            <p class="ml-4 colorBlue fw-b fs-xl" style="color: #5cd9e8;font-size: 14px;font-weight: bold">合同金额(万元)</p>
            <div>
              <dv-digital-flop style="color: #5cd9e8"
                class="dv-dig-flop ml-1 mt-2 pl-3"
                :config="number1"
              />
            </div>
          </div>
          <div
            class="bg-color-black item"
          >
            <p class="ml-4 colorBlue fw-b fs-xl" style="color: #13ce66;font-size: 14px;font-weight: bold">本月完成(万元)</p>
            <div>
              <dv-digital-flop
                class="dv-dig-flop ml-1 mt-2 pl-3"
                :config="number2"
              />
            </div>
          </div>
          <div class="bg-color-black item" >
            <p class="ml-4 colorBlue fw-b fs-xl" style="color: #ff5722;font-size: 14px;font-weight: bold">累计完成(万元)</p>
            <div>
              <dv-digital-flop
                class="dv-dig-flop ml-1 mt-2 pl-3"
                :config="number3"
              />
            </div>
          </div>

          <div class="bg-color-black item" >
            <p class="ml-4 colorBlue fw-b fs-xl" style="color: #ed5565;font-size: 14px;font-weight: bold">变更金额(万元)</p>
            <div>
              <dv-digital-flop
                class="dv-dig-flop ml-1 mt-2 pl-3"
                :config="number4"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="d-flex jc-center" style="height: 60%">
<!--      <div class="d-flex jc-center">-->
        <PieChart :project-id="this.projectId" />
      </div>

      <!-- 4个主要的数据 -->
<!--      <div class="bottom-data">-->

<!--        <div class="item-box mt-2">-->
<!--          <div class="d-flex">-->
<!--            <span class="coin">￥</span>-->
<!--            <dv-digital-flop class="dv-digital-flop" :config="this.number1" />-->
<!--          </div>-->
<!--        </div>-->
<!--        <div-->
<!--          class="item-box mt-2"-->
<!--          v-for="(item, index) in numberData"-->
<!--          :key="index"-->
<!--        >-->
<!--          <div class="d-flex">-->
<!--            <span class="coin">￥</span>-->
<!--&lt;!&ndash;            <dv-digital-flop class="dv-digital-flop" :config="item.number" />&ndash;&gt;-->
<!--          </div>-->
<!--          <p class="text" style="text-align: center;">-->
<!--            {{ item.text }}-->
<!--            <span class="colorYellow">(件)</span>-->
<!--          </p>-->
<!--        </div>-->
<!--      </div>-->

    </div>
  </div>
</template>

<script>

  import PieChart from "@/views/screen/screen1/page1/PieChart";

  export default {
    props: {
      projectId: {
        type: Number,
        required: true
      }
    },
    components: {
      PieChart
    },
    data() {
      return {
        number1: {
          number: [485714],
          toFixed: 0,
          textAlign: 'left',
          content: '{nt}',
          style: {
            fontSize: 26
          }
        },
        number2: {
          number: [84515],
          toFixed: 0,
          textAlign: 'left',
          content: '{nt}',
          style: {
            fontSize: 26
          }
        },
        number3: {
          number: [4814],
          toFixed: 0,
          textAlign: 'left',
          content: '{nt}',
          style: {
            fontSize: 26
          }
        },
        number4: {
          number: [0],
          toFixed: 0,
          textAlign: 'left',
          content: '{nt}',
          style: {
            fontSize: 26
          }
        }
      }
    },
    created() {
    }
  }
</script>

<style lang="scss" scoped>
  #centerLeft1 {
    padding: 16px;
    height: 45vh;
    width: 100%;
    border-radius: 10px;
    .bg-color-black {
      height: calc(50vh - 30px);
      border-radius: 10px;
    }
    .text {
      color: #c3cbde;
    }
    .dv-dec-3 {
      position: relative;
      width: 100px;
      height: 20px;
      top: -3px;
    }

    /*.bottom-data {*/
    /*  .item-box {*/
    /*    & > div {*/
    /*      padding-right: 5px;*/
    /*    }*/
    /*    font-size: 14px;*/
    /*    float: right;*/
    /*    position: relative;*/
    /*    width: 47%;*/
    /*    color: #d3d6dd;*/
    /*    .dv-digital-flop {*/
    /*      width: 120px;*/
    /*      height: 30px;*/
    /*    }*/
    /*    // 金币*/
    /*    .coin {*/
    /*      position: relative;*/
    /*      top: 6px;*/
    /*      font-size: 20px;*/
    /*      color: #ffc107;*/
    /*    }*/
    /*    .colorYellow {*/
    /*      color: yellowgreen;*/
    /*    }*/
    /*    p {*/
    /*      text-align: center;*/
    /*    }*/
    /*  }*/
    /*}*/
  }

  #center {
    display: flex;
    flex-direction: column;
    .up {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .item {
        border-radius: 6px;
        padding-top: 8px;
        margin-top: 8px;
        width: 24%;
        height: 70px;
        .dv-dig-flop {
          width: 150px;
          height: 30px;
        }
      }
    }
  }

</style>
